<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <link rel="stylesheet" href="./css/comment.css">
    <style>
       .btn-a{
           display: inline-block;
           width: 100px;
           height: 30px;
           line-height: 32px;
           text-align: center;
           border-radius: 4px;
           border: 1px solid #ccc;
           background: linear-gradient(#F2F1F2 20%,#DEDFDE 80%);
           box-shadow: 0 0 3px 0px #ccc;
       }
    </style>
</head>
<body>
<form class="layui-form" action="" id="complain_search">
    <div class="layui-form-item">
        <div class="layui-inline">
            <input type="text" name="orgNo" required lay-verify="required" placeholder="请输入供电所编号"
                   autocomplete="off" class="layui-input" style="width: 300px;" id="orgNo">
        </div>
        <div class="layui-inline"> <!-- 注意：这一层元素并不是必须的 -->
            <input type="text" class="layui-input" id="date" name="date">
        </div>
        <div class="layui-inline">
            <button id="search" class="btns" lay-submit
                    lay-filter="provinceSearch">查找
            </button>
        </div>
        <div class="layui-inline" id="testDiv2"> <!-- 注意：这一层元素并不是必须的 -->
            <a class="btn-a"  href="" download id="update">下载结果</a>
        </div>
    </div>
</form>
<div id="testDiv">
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="select">查看</a>
</script>
<div style="padding-top: 30px;display:none;text-align:center;" id="map">
    <div id="main" style="width: 1300px;height:600px;"></div>
</div>
<script src="js/jquery-3.4.1.js"></script>
<script src="layui/layui.js"></script>
<script src="js/echarts.min.js"></script>
<script type="text/javascript">
    function jump(e) {
        var consNo = $(e).html();
        var date = document.getElementById("date").value;
        var url = "jumpShow.html?consNo=" + consNo + "&date=" + date;//此处拼接内容
        document.cookie = "name3=a";
        window.location.href = url;
    }

    var titleTpl = function (d) {
        var html = '<a style="color:#1E9FFF" href="javascript:void(0);" lay-event="showRec" name="jump">' + d.tgNo + '</a>';
        return html;
    }
    var titleTpl2 = function (d) {
        var html = '<a style="color:#1E9FFF" href="javascript:void(0);" lay-event="showRec" onclick="jump(this)">' + d.consNo + '</a>';
        return html;
    }
    $(function () {
        var flag = getCookie("name")
        if (flag == "a") {
            getData1();
        }
    });

    function getData1() {
        var orgNo = getCookie("orgNo");
        var date = getCookie("date");
        document.cookie = "name=b";
        layui.use(['table', 'laydate'], function () {
            var table = layui.table;
            var laydate = layui.laydate;
            laydate.render({
                elem: '#date',//指定元素
                value: getRecentDay(-1)
                , min: -10
                , max: -1
            });
            table.render({
                id: "testReload"
                , elem: '#test'
                , url: 'tgLine/queryTgConsReport'
                , where: {
                    orgNo: orgNo,
                    dateDay: date
                }
                , cols: [[
                    {field: 'cityName', title: '市公司名称'}
                    , {field: 'countyName', title: '县公司名称'}
                    , {field: 'orgNo', title: '供电所编号'}
                    , {field: 'orgName', title: '供电所名称'}
                    , {field: 'tgName', title: '台区名称'}
                    , {field: 'tgNo', title: '台区编号', templet: titleTpl}
                    , {field: 'rid', title: '设备ID'}
                    , {field: 'tFactor', title: '倍率'}
                    , {field: 'consNo', title: '用户编号', templet: titleTpl2}
                    , {field: 'consName', title: '用户名称'}
                    , {field: 'pearson', title: '相关系数'}
                    , {field: 'dateDayStart', title: '起始时间'}
                    , {field: 'dateDay', title: '终止时间'}
                    , {field: 'ele', title: '用户电量'}
                    , {field: 'lossEle', title: '台区损失电量'}
                    , {field: 'lossPerAvg', title: '台区平均线损率'}
                    , {field: 'assetNo', title: '资产编号'}
                    , {field: 'tgTypeName', title: '类别定义'}
                    , {field: 'tgClass', title: '细分标签'}
                    , {field: 'tgClassComment', title: '分类规则'}
                    , {field: 'mergeLinelossRate', title: '目标线损率'}
                    , {field: 'linelossRateInterval', title: '目标线损率区间'}
                    , {field: 'eleArray', title: '用户电量数组', hide: true}
                    , {field: 'tgEleArray', title: '台区损失电量数组', hide: true}
                    , {field: 'timeArray', title: '时间数组', hide: true}
                    , {fixed: 'right', align: 'center', toolbar: '#barDemo'}
                ]]
                , page: true
                , method: 'post'
                , done: function (res) {
                    $("#update").attr("href",res.msg);
                    $('a[name="jump"]').on('click', function () {
                        var tgNo = $(this).html();
                        var date = document.getElementById("date").value;
                        var url = "jumpTgLineLoss.html?tgNo=" + tgNo + "&date=" + date;//此处拼接内容
                        document.cookie = "name2=a";
                        window.location.href = url;
                    });
                }
            });
            table.on('tool(test)', function (obj) {
                if (obj.event === 'select') {
                    var data = obj.data;
                    var eleArray = data.eleArray;
                    var tgEleArray = data.tgEleArray;
                    var timeArray = data.timeArray;
                    var index = eleArray.indexOf("[");
                    var index2 = eleArray.indexOf("]");
                    eleArray=eleArray.substring((index+1),index2);
                    eleArray=eleArray.split(",");
                    index = tgEleArray.indexOf("[");
                    index2 = tgEleArray.indexOf("]");
                    tgEleArray=tgEleArray.substring((index+1),index2);
                    tgEleArray=tgEleArray.split(",");
                    index = timeArray.indexOf("[");
                    index2 = timeArray.indexOf("]");
                    timeArray=timeArray.substring((index+1),index2);
                    timeArray=timeArray.split(",");
                    show(eleArray,tgEleArray,timeArray);
                    $("#map").css("display", "none");
                    layer.open({
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['1400px', '700px'], //宽高
                        content: $("#map")
                    });
                }
            });
        });
        document.getElementById("orgNo").value = orgNo;
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
        }
        return "";
    }


    layui.use(['form', 'table'], function () {
        var table = layui.table;
        var form = layui.form;

        form.render();
        form.on('submit(provinceSearch)', function (data) {
            var formData = data.field;
            var orgNo = formData.orgNo;
            var date = formData.date;
            table.reload('testReload', {
                where: {
                    orgNo: orgNo,
                    dateDay: date
                },
                url: 'tgLine/queryTgConsReport',
                method: 'post',
                done: function (res) {
                    $("#update").attr("href",res.msg);
                    document.cookie = ("orgNo=" + orgNo);
                    document.cookie = ("date=" + date);
                }
            });
            return false;
        });

    });

    function getRecentDay(day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds);
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);

        return tYear + "-" + tMonth + "-" + tDate;
    }

    function doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
            m = "0" + month;
        }
        return m;
    }
    function show(array1, array2,timeArray) {
        var chartDom = document.getElementById("main");
        var myChart = echarts.init(chartDom);
        var option;
        option = {
            title: {
                text: '',
                x: 'center',
                y: 'top'
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                data: ["用户电量", "台区损失电量"],
                top: '30'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: timeArray
            },
            yAxis: [
                {
                    name:'电量',
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    position: 'right'
                },
                {
                    name:'电量',
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    position: 'left'
                }
            ],
            series: [
                {
                    name: "用户电量",
                    type: 'line',
                    yAxisIndex:0,
                    data: array1
                },
                {
                    name: "台区损失电量",
                    type: 'line',
                    yAxisIndex:1,
                    data: array2
                }
            ]
        };
        myChart.setOption(option);
    }

</script>
</body>
</html>
